<!DOCTYPE html>
<html>
	<head>
		<!--编码-->
		<meta charset="UTF-8">
		<!--移动端meta标签-->
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!--作者-->
		<meta name="author" content="Mr.HuangYJ"/>
		<!--网站描述-->
		<meta name="description" content="网易官方，无网易不江湖."/>
		<!--编辑器-->
		<meta name="generator" content="HBuilder"/>
		<!--关键字-->
		<meta name="keywords" content="网易，新闻，电商，互联网"/>
		<!--网站名-->
		<title>网易</title>
		<!--Sass-->
		<link rel="stylesheet" href="css/a.css" />
		<!--Swiper-->
		<link rel="stylesheet" href="css/swiper.min.css" />
		<script src="js/swiper.min.js"></script>
		<!--Jquery-->
		<script type="text/javascript" src="js/jquery.js"></script>
	</head>
	<!-- 网页使用width 330px布局 -->
	<body>
		<!--头部标签-->
		<div class="header">
			<img src="img/icon-personal-v2.png" alt="" />
			<img src="img/logo_2017_v1.png" alt="" />
		    <img src="img/download_2017.png" alt="" />
		    <img src="img/icon-email-v2.png" alt="" />
		</div>
		<!--选项栏-->
		<div class="xuanxiang">
			<ul>
				<li>体育</li>
				<li>图片</li>
				<li>财经</li>
				<li>汽车</li>
				<li>军事</li>
				<li>直播</li>
			</ul>
			<img src="img/icon8.png"/>
		</div>
		<!--Swiper轮播图-->
		<div class="swiper-container">
			<!--装图片-->
			<div class="swiper-wrapper">
				<!-- One img -->
				<div class="swiper-slide">
					<img src="img/img1.ph.126.jpg" alt="" />
				</div>
				<!-- Two img -->
				<div class="swiper-slide">
					<img src="img/img2.ph.126.jpg" alt="" />
				</div>
				<!-- Three img -->
				<div class="swiper-slide">
					<img src="img/img3.ph.126.jpg" alt="" />
				</div>
			</div>
		</div>
		<!--5个小图标-->
		<div class="five">
            <div><img src="img/icon1.png" alt="" /><p>美图</p></div>
            <div><img src="img/icon2.png" alt="" /><p>新闻</p></div>
            <div><img src="img/icon3.png" alt="" /><p>明星</p></div>
            <div><img src="img/icon4.png" alt="" /><p>体坛</p></div>
            <div><img src="img/icon5.png" alt="" /><p>热点</p></div>
		</div>
		<!--内容区-->
		<div class="neirong" id="b">
			
		</div>
	</body>
	<script>
		
		// 页面字体随着clientWidth变化而动态改变
		window.onload=window.onresize=function(){
			document.documentElement.style.fontSize=10*(document.documentElement.clientWidth/330)+"px";
		}
		
		// Swiper 初始化
		var mySwiper = new Swiper(".swiper-container",{
			autoplay:3000,
			autoplayDisableOnInteraction:true,
			speed:500
		})
		
		// 选项卡字体点击变色
		$("ul li").click(function(){
			$(this).css("color","#FFD2D2").siblings().css("color","#FFAAAA");
		})
		
		// 渲染页面
		$.get("http://127.0.0.1:3488",function(data){
			
			let resObj = JSON.parse(data);
			let str = "";
			
			for(x of resObj.user){
				
				str += `<div class="hehe"><img src="${x.src}" alt="" /><span>${x.title}</span></div>`
				
			}
			
			$("#b").html(str);
		})
	</script>
</html>
